<!-- 修改资料 -->
<template>
	<view class="editMsg">

		<image class="bg" src="/static/images/memberRecharge-bg.png" mode="aspectFit"></image>

		<view class="content">

			<!-- 头像 -->
			<view class="headImg">
				<upData shape="round" type="image" :box="180" :borderRadius="24" @submit="setImg1"
					:previewData="previewData.headImg" useType="headImg">
				</upData>
			</view>


			<!-- 表单 -->
			<view class="media">
				<EditForm :roleType="roleType" @submit="formSubmit" :data="previewData.formData"></EditForm>
			</view>




			<!-- 首图上传 -->
			<view class="media" v-if="roleType">
				<view class="title">
					<text class="icon">*</text>
					<text>封面图</text>
				</view>
				<upData shape="party" type="image" :box="180" :imgSize="1" @submit="setImg2" :borderRadius="24"
					:previewData="previewData.firstImg">
				</upData>
			</view>

			<!-- 内图上传 -->
			<view class="media" v-if="roleType">
				<view class="title">
					<text class="icon">*</text>
					<text>生活照</text>
				</view>
				<upData shape="party" type="image" :box="180" :imgSize="10" @submit="setImg3" :borderRadius="24"
					:previewData="previewData.childImgs">
				</upData>
			</view>

			<!-- 视频上传 -->
			<view class="media" v-if="roleType">
				<view class="title">
					<text class="icon">*</text>
					<text>视频</text>
				</view>
				<upData shape="party" type="video" :box="320" :imgSize="1" @submit="setImg4" :borderRadius="24"
					:previewData="previewData.video">
				</upData>
			</view>

			<!-- 音频上传 -->
			<view class="media" v-if="roleType">
				<view class="title">
					<text class="icon">*</text>
					<text>录音</text>
				</view>
				<ChatAudio @submit="audioSubmit" :previewData="previewData.audio"></ChatAudio>
			</view>





			<!-- 服务项目 -->
			<view class="item" v-if="roleType">
				<view class="title">
					<text class="icon">*</text>
					<text>服务项目</text>
				</view>
				<view class="content">
					<view :class="{
						'content-item':true,
						'content-item2': res.status
					}" v-for="res in classifyData" :key="res.id" @click="selectClassify(res)">
						{{res.name}}
					</view>
				</view>
			</view>
		</view>



		<view :class="{
			'submit':true,
			'submit1': !verifySubmit
		}" @click="submit">{{verifySubmit ? '完成' : "等待上传"}}</view>

	</view>
</template>

<script>
	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'


	// 引入api
	import {
		setUserUpdateApi, // 更新用户信息
		setAnonArtistSettleApi, // 艺人入驻
	} from '@/api/user.js'
	import {
		postArtistDetail, // 获取艺人详情
	} from '@/api/artist.js'
	


	// 公共方法
	import {
		wxUpDate, // 小程序上传
	} from '@/utils/wx/wxPublick-weixin.js'


	// 页面组件
	import EditForm from './components/editForm.vue'
	import ChatAudio from './components/chatAudio.vue'
	

	export default {
		components: {
			EditForm,
			ChatAudio,
		},
		data() {
			return {

				//预览数据
				previewData: {
					headImg: [], // 头像
					formData: {
						nickName: '', // 昵称
						birthday: '', // 生日
						gender: 2, // 性别：1-男，2-女
						age: '', // 年龄
						height: '', // 身高
						weight: '', // 体重
						signature: '', // 个性签名（个人介绍）
					},
					firstImg: [], // 封面图

					childImgs: [], // 内图

					video: [], // 视频

					audio: [], // 音频

					cateIds: [], // 服务项目

				},


				// 基础表单数据，如果是艺人，那就
				formData: {
					// 前四个通用
					avatarUrl: '', // 头像
					nickName: '', // 昵称
					birthday: '', // 生日
					gender: 2, // 性别：1-男，2-女

					// artistUpdateVo: {}, // 如果是艺人，那就添加一个艺人信息
				},

				// 艺人信息
				artistUpdateVo: {
					age: '', // 年龄
					height: '', // 身高
					weight: '', // 体重
					signature: '', // 个性签名（个人介绍）

					coverUrl: '', // 封面照URL（首图）
					photoUrls: '', // 生活照URL（内图）
					videoUrl: '', // 视频
					voiceUrl: '', // 语音

					cateIds: [], // 艺人分类选择（能够预约的项目）
				},



				// 艺人服务项目
				classifyData: [],


			};
		},
		computed: {
			...mapGetters(['userInfo']),

			/**
			 * 是否是艺人
			 */
			roleType() {
				// 默认是true,也就是展示艺人应该提交的数据
				return true
				
				let show = false

				let type1 = Object.keys(this.userInfo).length > 0
				let type2 = this.userInfo?.userArtistVo !== undefined && this.userInfo?.userArtistVo  !== null
				let type3 = Object.prototype.toString.call(this.userInfo?.userArtistVo) === '[object Object]' && Object.keys(this.userInfo?.userArtistVo).length > 0
				let type4 = this.userInfo?.userArtistVo?.artistId !== undefined && this.userInfo?.userArtistVo?.artistId !== null
				


				if (type1 && type2 && type3 && type4) {
					show = true
				}
				return show;
			},
			
			/**
			 * 校验是否可以上传了
			 */
			verifySubmit(){
				let str = true
				
				for(let key in this.formData){
					if(this.formData[key] === ''){
						str = false
					}
				}
				
				for(let key in this.artistUpdateVo){
					if(this.artistUpdateVo[key] === ''){
						str = false
					}
				}
				
				return str;
				
			},
		},

		async created() {
			await this.init()
			await this.initData()
		},

		methods: {
			...mapActions('home', ['getCate']),

			/**
			 * 初始化页面数据
			 */
			async initData() {
				this.previewData.headImg = this.userInfo.avatarUrl ? [this.userInfo.avatarUrl] : [] // 头像
				let obj = {
					nickName: this.userInfo.nickName, // 昵称
					birthday: this.userInfo.birthday, // 生日
					gender: this.userInfo.gender, // 性别：1-男，2-女
				}

				let obj2 = {
					age: '', // 年龄
					height: '', // 身高
					weight: '', // 体重
					signature: '', // 个性签名（个人介绍）
				}

				// 是否是艺人
				if (this.roleType) {
					// 获取艺人详情
					let artistData = await this.getArtistDetail()
					console.log(artistData, '是否卡了书法家拉屎',artistData.cates);
					if (artistData !== false) {
						obj2 = {
							age: artistData.age, // 年龄
							height: artistData.height, // 身高
							weight: artistData.weight, // 体重
							signature: artistData.signature, // 个性签名（个人介绍）
						}

						// 封面图
						this.previewData.firstImg = artistData.coverUrl ? [artistData.coverUrl] : []
						// 内图
						this.previewData.childImgs = artistData.photoVos.map(res => (res.picUrl))
						// 视频
						this.previewData.video = artistData.videoUrl ? [artistData.videoUrl] : []
						// 音频
						this.previewData.audio = artistData.voiceUrl ? [artistData.voiceUrl] : []
						// 服务项目
						this.previewData.cateIds = artistData.cates.map(res => (res.id))
						console.log(this.previewData.cateIds, '哒哒哒哒哒哒多多',artistData.cates);

						// 设置服务项目
						this.previewData.cateIds.map(res => {
							this.classifyData.map(res2 => {
								if (res === res2.id) {
									this.selectClassify(res2)
								}
							})
						})

					}
				}

				Object.assign(this.previewData.formData, obj, obj2)
			},


			/**
			 * 初始化
			 */
			async init() {

				let user = this.userInfo

				// 如果是艺人,那就是必填
				if (this.$public.getValueStatus(user) && this.$public.getValueStatus(user.phone) && user
					.userArtistVo !==
					null) {
					this.required = true
				} else {
					this.required = false
				}


				// 获取艺人分类
				let arr = await this.getCate({})
				let arr2 = []
				arr.map(res => {
					arr2.push(...res.cateList)
				})

				this.classifyData = arr2.map(res => ({
					name: res.title,
					id: res.id,
					status: false,
					data: res
				}))

			},

			/**
			 * 获取艺人详情
			 */
			async getArtistDetail() {
				let params = {
					id: this.userInfo.userArtistVo.artistId,
					pageNum: 1,
					pageSize: 20
				}
				const res = await postArtistDetail(params)
				if (res.code !== 200) {
					this.$public.showText(res.msg || '请求失败')
					return false
				}
				return res.data
			},



			/**
			 * 头像
			 */
			setImg1(val) {
				this.formData.avatarUrl = val[0]
			},


			/**
			 * 表单修改
			 */
			formSubmit(val) {
				val.map(res => {
					if (res.status === 0) {
						this.formData[res.name] = res.value
					} else {
						this.artistUpdateVo[res.name] = res.value
					}
				})
			},

			/**
			 * 首图
			 */
			setImg2(val) {
				this.artistUpdateVo.coverUrl = val[0]
				console.log('首图上传', val);
			},

			/**
			 * 多图
			 */
			setImg3(val) {
				this.artistUpdateVo.photoUrls = [...val]

				console.log('多图上传', val);
			},

			/**
			 * 视频上传
			 */
			setImg4(val) {
				// 是数组,并且长度大于0
				if(Object.prototype.toString.call(val) === '[object Array]' && val.length>0){
					this.artistUpdateVo.videoUrl = val[0]
				}else{
					this.artistUpdateVo.videoUrl = ''
				}
				
				console.log(this.artistUpdateVo.videoUrl,'视频上传', val);
			},

			/**
			 * 音频上传
			 */
			audioSubmit(val) {
				console.log('音频', val);
				this.artistUpdateVo.voiceUrl = val
			},



			/**
			 * 选择服务项目
			 */
			selectClassify(val) {
				console.log('执行了几次');
				this.classifyData.forEach((res, index) => {
					if (val.id === res.id) {
						this.classifyData[index].status = !res.status
					}
				})

				// 将艺人服务项目赋值给基础表单数据
				let arr = []
				this.classifyData.map(res => {
					if (res.status) {
						arr.push(res.id)
					}
				})

				this.artistUpdateVo.cateIds = [...arr]
			},




			/**
			 * 完成修改
			 */
			async submit() {


				// 第一步是校验必填项是否有值
				if (!this.verify()) {
					return
				}

				// 打开运行中提示
				this.$public.showLoading(true, '正在上传中')

				// 发起请求
				this.getUserUpdate()




			},

			/**
			 * 校验是否有值
			 */
			verify() {

				// 如果是用户，那就不校验直接通过
				if (!this.roleType) {
					return true
				}

				let obj = {
					...this.formData,
					...this.artistUpdateVo
				}

				// 赋值
				this.formData['artistUpdateVo'] = {
					...this.artistUpdateVo
				}

				let str = ''

				for (let key in obj) {
					if (obj[key] === "" || obj[key] === []) {
						switch (key) {
							case 'avatarUrl':
								str = '请上传头像'
								break;
							case 'coverUrl':
								str = '请上传封面图'
								break;
							case 'photoUrls':
								str = '请上传生活照'
								break;
							case 'videoUrl':
								str = '请上传视频'
								break;
							// case 'voiceUrl':
							// 	str = '请上传录音'
							// 	break;
							case 'nickName':
								str = '请填写昵称'
								break;
							case 'birthday':
								str = '请选择生日'
								break;
							case 'gender':
								str = '请选择性别'
								break;
							case 'age':
								str = '请输入年龄'
								break;
							case 'height':
								str = '请输入身高'
								break;
							case 'weight':
								str = '请输入体重'
								break;
							case 'signature':
								str = '请输入个性签名'
								break;
							case 'cateIds':
								str = '请选择可预约的项目'
								break;
						}
					}

					// 如果已经有一个没有填,那就直接跳出不要继续了
					if (str !== "") {
						break
					}
				}


				console.log(obj, 'kkkk这是强拿了就够了');

				// 返回状态
				if (str === "") {
					return true
				} else {
					this.$public.showText(str)
					return false
				}

			},



			/**
			 * 更新用户信息
			 */
			async getUserUpdate() {

				console.log('发起请求钱看看数据v’', this.formData);
				// const res = await setUserUpdateApi(this.formData) // 修改资料
				const res = await setAnonArtistSettleApi(this.formData) // 艺人加盟

				// 关闭运行中提示
				this.$public.showLoading(false)

				if (res.code !== 200) {
					return this.$public.showText(res.msg || '修改失败')
				}
				this.$public.showText('修改成功')
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/myTab/index'
					})
				}, 3000)
			}

		}
	}
</script>

<style lang="less" scoped>
	.editMsg {
		position: relative;
		#padding(160rpx 0 24rpx 0);

		.bg {
			#position(absolute, 0, 0);
			#box(750rpx, 336rpx);
			z-index: 10;
		}


		.content {
			position: relative;
			z-index: 999;

			#padding(160rpx 24rpx 48rpx 24rpx);
			#box(100%, -, 48rpx 48rpx 0 0, #fff);


			.headImg {
				position: absolute;
				top: -60rpx;
				left: 60rpx;
				#box(180rpx);
			}

			.media {
				margin-bottom: 24rpx;

				.title {
					#font(28rpx, rgb(96, 98, 102));

					.icon {
						color: #dd524d;
						font-weight: bold;
					}
				}
			}




			// 项目
			.item {
				.title {
					#font(28rpx, rgb(96, 98, 102));

					.icon {
						color: #dd524d;
						font-weight: bold;
					}
				}

				.content {
					#padding(24rpx 0 0 0);
					#flex(-, -, center);
					flex-wrap: wrap;
					gap: 12rpx;

					.content-item {
						#padding(12rpx 24rpx);
						#font(24rpx, #fff);
						background-color: #d6d6d6;
						border-radius: 8rpx;
					}

					.content-item2 {
						background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
					}
				}
			}
		}

		.submit {
			#box(-, 88rpx, 100rpx, linear-gradient(180deg, #E27C8A 0%, #EC606F 100%));
			#flex(-, center, center);
			#font(36rpx, #FDF3F3);
			margin: 0 64rpx;
		}
		
		.submit1{
			background: #999;
		}
	}
</style>